<template>
    <div>
        <div class="contain">
            <div class="searchbox">
                <table class="all_tb" cellspacing="10">
                    <tr>
                        <span align="right">订单编号：</span>
                        <th>
                            <el-input v-model="id" placeholder="订单编号查询"></el-input>
                        </th>
                        <span align="right">客户姓名：</span>
                        <th>
                            <el-input v-model="name" placeholder="客户姓名查询"></el-input>
                        </th>
                        <span align="right">单位：</span>
                        <th>
                            <el-input v-model="company" placeholder="单位查询"></el-input>
                        </th>
                        <span align="right">订单日期：</span>
                        <th>
                            <div class="block">
                            <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                            </el-date-picker>
                            </div>
                        </th>
                    </tr>
                </table>
                <div class="exports">
                    <el-button type="primary">导出excel</el-button>
                    <el-button type="primary" icon="el-icon-search">查询</el-button>
                    <el-button type="primary"><i class="el-icon-refresh-right"></i>重置</el-button>
                </div>
            </div>
            <div class="staus"></div>
            <div>
  <el-tabs v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="未审核" name="noaudit">未审核</el-tab-pane>
    <el-tab-pane label="已支付" name="paid">已支付</el-tab-pane>
    <el-tab-pane label="未支付" name="unpaid">未支付</el-tab-pane>
    <el-tab-pane label="未通过" name="Failed">未通过</el-tab-pane>
    <el-tab-pane label="审核完成" name="finished">审核完成</el-tab-pane>
  </el-tabs>
</div>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column fixed prop="id" label="订单编号" width="120"></el-table-column>
                <el-table-column fixed prop="company" label="单位" width="90"></el-table-column>
                <el-table-column prop="name" label="姓名" width="100"></el-table-column>
                <el-table-column prop="level" label="客户级别" width="100"></el-table-column>
                <el-table-column prop="time" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="type" label="产品类型" width="100"></el-table-column>
                <el-table-column prop="num" label="数量（张）" width="120"></el-table-column>
                <el-table-column prop="unitprice" label="单价（元）" width="120"></el-table-column>
                <el-table-column prop="money" label="金额" width="100"></el-table-column>
                <el-table-column prop="paymentstatus" label="支付状态" width="120"></el-table-column>
                <el-table-column prop="audit" label="审核状态" width="120"></el-table-column>
                <el-table-column prop="mode" label="配送方式" width="120"></el-table-column>
                <el-table-column fixed="right" prop="operation" label="操作" width="120"></el-table-column>
            </el-table>
            <el-pagination small layout="prev, pager, next" :total="50"></el-pagination>
        </div>
    </div>
</template>

<style lang="less" scoped>
*{
    margin: 0;padding: 0;
}
//这是订单查询部分的属性
.all_tb tr span{
    display: inline-block;
    width: 80px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}
//这是表格中的属性设置

//这是中间三个按钮的样式属性
.exports{
    margin-left: 1000px;
}
//这是底部分页
.el-pagination{
    text-align: center;
    margin-top: 20px;
}
</style>
<script>
export default {
    data() {
        return {
            id: '',
            name:'',
            company:'',
            value1:'',
            //以下应该导入订单数据
            tableData: [{
            id: '510515482135565276',
            company: '万维科技',
            name:'张三',
            level:'大客户',
            time:'2021-03-13 11:04:52',
            type:'年卡',
            num:3,
            unitprice:100,
            money:300,
            paymentstatus:'已支付',
            audit:'未审核',
            mode:'线下',
            operation:'',
        }],
        activeName: 'first'
        }
    },
    methods: {
        handleClick(row) {
        console.log(row);
      },
      handleClick(tab, event) {
        console.log(tab, event);
      }
    },
    
}
</script>